import React from 'react';
import './index.css';

const Index: React.FC = () => {
    const logos = [
        "https://cdn.dancf.com/fe-assets/20240326/6ce218c2f66fa6a3798cd5680419f94e.png",
        "https://cdn.dancf.com/fe-assets/20240326/6ce218c2f66fa6a3798cd5680419f94e.png"

    ];
    const logos2 = [
        "https://cdn.dancf.com/fe-assets/20240326/4de240fe4534236f974e540e063e76d9.png",
        "https://cdn.dancf.com/fe-assets/20240326/4de240fe4534236f974e540e063e76d9.png"
    ];
    const logos3 = [
        "https://cdn.dancf.com/fe-assets/20240326/a9ad647588bf921ea2f40cc4c96d31b3.png",
        "https://cdn.dancf.com/fe-assets/20240326/a9ad647588bf921ea2f40cc4c96d31b3.png"
    ];
    const logos4 = [
        "https://cdn.dancf.com/fe-assets/20240326/26a91384853dfbdb6df0dc3140929843.png",
        "https://cdn.dancf.com/fe-assets/20240326/26a91384853dfbdb6df0dc3140929843.png"
    ];
    const logos5 = [
        "https://cdn.dancf.com/fe-assets/20240326/bf1fd26d1a1e1792032d00c2daa0cce7.png",
        "https://cdn.dancf.com/fe-assets/20240326/bf1fd26d1a1e1792032d00c2daa0cce7.png"
    ];
    const doubledLogos = [...logos, ...logos]; // 将图片列表复制一次

    return (
        <div className='j-box'>
            <p>众多企业携手稿定共建内容力</p>
            <div className='zo1'>
                {doubledLogos.map((logo, index) => (
                    <img key={index} src={logo} alt={`Logo ${index + 1}`} />
                ))}
            </div>
            <div className='zo2'>
                {logos2.map((logo, index) => (
                    <img key={index} src={logo} alt={`Logo ${index - 1}`} />
                ))}
            </div>
            <div className='zo1'>
                {logos3.map((logo, index) => (
                    <img key={index} src={logo} alt={`Logo ${index + 1}`} />
                ))}
            </div>
            <div className='zo2'>
                {logos4.map((logo, index) => (
                    <img key={index} src={logo} alt={`Logo ${index - 1}`} />
                ))}
            </div>
            <div className='zo1'>
                {logos5.map((logo, index) => (
                    <img key={index} src={logo} alt={`Logo ${index + 1}`} />
                ))}
            </div>
            <div className='gradient-box'>

            </div>
            <div className='gradient2-box'>

            </div>
        </div>
    );
}

export default Index;